<template>
    <div class="app-container">
        <div class="head-tabs">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="研发背景" name="first"></el-tab-pane>
                <el-tab-pane label="科研团队" name="second"></el-tab-pane>
                <el-tab-pane label="科研合作机构" name="third"></el-tab-pane>
                <el-tab-pane label="研发大事记" name="fourth"></el-tab-pane>
                <el-tab-pane label="中试车间" name="fifth"></el-tab-pane>
                <el-tab-pane label="食品安全与可持续发展" name="sixth"></el-tab-pane>
            </el-tabs>
        </div>
        <section>
            <!-- 研发背景 -->
            <el-form ref="form" :model="form" class="form content">
                <div class="content" v-if="activeName=='first'">
                    <div style="display:flex">
                        <el-form-item label="背景图（PC）" prop="img_pc" style="width:224px" :rules="[{ required: true, message: '请上传背景图（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.img_pc">
                                <el-image :src="form.img_pc"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.img_pc = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="背景图（移动）" prop="img" style="width:224px" :rules="[{ required: true, message: '请上传背景图（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.img">
                                <el-image :src="form.img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.img = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
                <!-- 科研团队 -->
                <div class="content" v-else-if="activeName=='second'">
                    <el-card class="box-card" style="width:100%;margin-top:5px;margin-bottom:22px" v-for="(item,index) in form.info" :key="index">
                        <div slot="header" class="clearfix">
                            <span>个人信息</span>
                            <el-button style="float: right; padding: 3px" type="danger" v-if="index!=0" @click="form.info.splice(index,1)">删除</el-button>
                            <el-button style="float: right; padding: 3px;margin-right:5px" type="primary" @click="form.info.push({img:'',name:'',title:'',title_e:'',tag:''})">增加</el-button>
                        </div>
                        <div class="list">
                            <el-form-item label="头像" style="width:224px" :rules="rules.info.img" :prop="'info.'+ index +'.img'">
                                <div class="img" v-if="item.img">
                                    <el-image :src="item.img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="item.srcList">
                                        <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                    </el-image>
                                    <i class="el-icon-delete" @click="item.img = ''"></i>
                                </div>
                                <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="{flag:a=index}" v-else :show-file-list="false">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                            <el-form-item label="姓名" :rules="rules.info.name" :prop="'info.'+ index +'.name'" style="width:225px;margin-right:5px">
                                <el-input v-model="item.name" placeholder="请输入姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="职称" :rules="rules.info.title" :prop="'info.'+ index +'.title'" style="width:225px;margin-right:5px">
                                <el-input v-model=" item.title" placeholder="请输入职称">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="英文职称" :rules="rules.info.title_e" :prop="'info.'+ index +'.title_e'" style="width:400px;margin-right:5px">
                                <el-input v-model="item.title_e" placeholder="请输入英文职称"></el-input>
                            </el-form-item>
                            <el-form-item label="简介" :rules="rules.info.title_e" :prop="'info.'+ index +'.tag'" style="width:100%;">
                                <el-input placeholder="请输入简介" type="textarea" v-model="item.tag" autosize></el-input>
                            </el-form-item>
                        </div>
                    </el-card>
                </div>

                <!-- 科研合作机构 -->
                <div class="content" v-else-if="activeName=='third'" style="display:flex">
                    <div style="display:flex">
                        <el-form-item label="图片（PC）" prop="img_pcJG" style="width:224px" :rules="[{ required: true, message: '请上传图片（PC）', trigger: 'change' }]">
                            <div class="img" v-if="form.img_pcJG">
                                <el-image :src="form.img_pcJG"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.img_pcJG = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="flag" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="图片（移动）" prop="imgJG" style="width:224px" :rules="[{ required: true, message: '请上传图片（移动）', trigger: 'change' }]">
                            <div class="img" v-if="form.imgJG">
                                <el-image :src="form.imgJG"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="form.srcList1">
                                    <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                </el-image>
                                <i class="el-icon-delete" @click="form.imgJG = ''"></i>
                            </div>
                            <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" v-else :show-file-list="false">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>

                <!-- 研发大事记 -->
                <div class="content" v-else-if="activeName=='fourth'">
                    <el-card class="box-card" style="width:100%;margin-top:5px;margin-bottom:22px" v-for="(item,index) in form.things" :key="index">
                        <div slot="header" class="clearfix">
                            <span>事记信息</span>
                            <el-button style="float: right; padding: 3px" type="danger" v-if="index!=0" @click="form.things.splice(index,1)">删除</el-button>
                            <el-button style="float: right; padding: 3px;margin-right:5px" type="primary" @click="form.things.push({date:'',title:'',href:'',content:'',img:''})">增加</el-button>
                        </div>
                        <div class="list">
                            <el-form-item label="日期" :rules="rules.things.date" :prop="'things.'+ index +'.date'" style="width:225px">
                                <el-input v-model="item.date" placeholder="请输入日期"> </el-input>
                            </el-form-item>
                            <el-form-item label="标题" :rules="rules.things.title" :prop="'things.'+ index +'.title'" style="width:225px;margin-right:5px">
                                <el-input v-model="item.title" placeholder="请输入标题">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="跳转链接" style="width:225px">
                                <el-input v-model="item.href" placeholder="请输入跳转链接">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="内容" :rules="rules.things.content" :prop="'things.'+ index +'.content'" style="width:100%">
                                <el-input v-model="item.content" placeholder="请输入内容" type="textarea"></el-input>
                            </el-form-item>
                            <el-form-item label="图片" style="width:100%" :rules="rules.things.img" :prop="'things.'+ index +'.img'">
                                <div class="img" v-if="item.img">
                                    <el-image :src="item.img"  :lazy="true"  fit="fill" style="width: 100%; height: 100%" :preview-src-list="item.srcList">
                                        <div slot="error" class="image-slot"   style="width: 100%;height: 100%;background-color: #e6e6e6;"></div>
                                    </el-image>
                                    <i class="el-icon-delete" @click="item.img = ''"></i>
                                </div>
                                <el-upload :action="$Reg.uploadUrl" list-type="picture-card"  :http-request="okUpload" :data="{flag:a=index}" v-else :show-file-list="false">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                        </div>
                    </el-card>
                </div>

                <!-- 中试车间 -->
                <div class="content" v-else-if="activeName=='fifth'">
                    <!-- <el-form-item style="width:100%">
                        <vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>
                    </el-form-item> -->
                </div>

                <!-- 食品安全与可持续发展 -->
                <div class="content" v-else>
                    <el-form-item style="width:100%" label="图片">
                        <el-upload :action="$Reg.uploadUrl" list-type="picture-card" :file-list="form.imgs"  :http-request="okUpload" :on-remove="remove" :on-preview="preview">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </div>
                <el-form-item label="富文本" style="width:100%" prop="content" :rules="[{ required: true, message: '请输入富文本', trigger: 'blur' }]" v-show="activeName=='first' || activeName=='fifth' || activeName=='sixth'">
                    <div id="edit1" ref="edit1"></div>
                </el-form-item>
                <div class="sure">
                    <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                </div>
            </el-form>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </section>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: '',
            flag: {
                a: 0,
            },
            activeName: 'first',
            list: [],
            editor1: '',
            // 验证
            rules: {
                info: {
                    img: [{ required: true, message: '请上传头像', trigger: 'blur' }],
                    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                    title: [{ required: true, message: '请输入职称', trigger: 'blur' }],
                    title_e: [{ required: true, message: '请输入英文职称', trigger: 'blur' }],
                    tag: [{ required: true, message: '请输入简介', trigger: 'blur' }],
                },
                things: {
                    date: [{ required: true, message: '请输入日期', trigger: 'blur' }],
                    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    img: [{ required: true, message: '请上传图片', trigger: 'blur' }],
                },
            },
            form: {
                img: '',
                img_pc: '',
                imgJG: '',
                img_pcJG: '',
                content: '',
                type: 0,
                info: [
                    {
                        img: '',
                        name: '',
                        title: '',
                        title_e: '',
                        tag: ''
                    }
                ],
                things: [
                    {
                        date: '',
                        title: '',
                        content: '',
                        url: '',
                        img: ''
                    }
                ],
                imgs: []
            },
        }
    },
    created() {
    },
    mounted() {
        this.getScientific()
    },
    methods: {
        preview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        preText(pretext) {
            return pretext.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>')
        },
        remove(file, fileList) {
            this.form.imgs = fileList
        },
        async getScientific() {
            let res = await this.$Http.getScientific()
            if (res.status == 1) {
                this.list = res.data
                this.form.content = res.data[0].content
                this.form.img = res.data[0].img
                this.form.img_pc = res.data[0].img_pc
                this.form.imgJG = res.data[2].img
                this.form.img_pcJG = res.data[2].img_pc
                this.form.info = res.data[1].team
                this.form.things = res.data[3].event
                // for (let i in res.data[1].team) {
                //     this.form.info[i].tag = this.a(res.data[1].team[i].tag)
                // }
                this.form.srcList = [res.data[0].img_pc]
                this.form.srcList1 = [res.data[0].img]
                for (let i in res.data[5].imgs) {
                    this.form.imgs.push({ url: res.data[5].imgs[i].img })
                }
                for (let j in this.list[1].team) {
                    if (this.list[1].team[j].tag == null) {
                        this.list[1].team[j].tag = []
                        this.list[1].team[j].tag.push({ name: '' })
                    }
                }
                for (let i in this.form.info) {
                    this.form.info[i].tag = this.form.info[i].tag.replace(/<br\/>/g, "\n");
                }
                this.getEdit()
            } else {
                this.$message.error(res.msg)
            }
        },
        handleClick(tab, event) {
            let list = { first: 0, second: 1, third: 2, fourth: 3, fifth: 4, sixth: 5 }
            let name = tab.name
            if (name == 'first' || name == 'fifth' || name == 'sixth') {
                this.editor1.txt.html(this.list[list[name]].content)
            }
            // this.form.srcList = [this.form['type' + list[name] + 'Img_pc']]
            // this.form.srcList1 = [this.form['type' + list[name] + 'Img']]
            if (list[name] == 0) {
                this.form.srcList = [this.form.img_pc]
                this.form.srcList1 = [this.form.img]
            } else if (list[name] == 2) {
                this.form.srcList = [this.form.img_pcJG]
                this.form.srcList1 = [this.form.imgJG]
            }
            for (let i in this.form.info) {
                this.form.info[i].srcList = [this.form.info[i].img]
            }
            for (let i in this.form.things) {
                this.form.things[i].srcList = [this.form.things[i].img]
            }
        },
        getEdit() {
            this.editor1 = new E(this.$refs.edit1)
            this.editor1.config.onchange = (html) => {
                this.form.content = html
            }
            this.editor1.config.customUploadImg = (resultFiles, insertImgFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertImgFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.config.customUploadVideo = (resultFiles, insertVideoFn) => {
                let formData = new window.FormData();
                formData.append("files", resultFiles[0]);
                this.$Http.upload(formData).then((res) => {
                    if (res.status == 1) {
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                        insertVideoFn(res.data)
                    } else {
                        this.$message(res.msg);
                    }
                });
            }
            this.editor1.create()
            this.editor1.txt.html(this.form.content);
        },
        save() {
            let info = JSON.parse(JSON.stringify(this.form.info))
            let form = JSON.parse(JSON.stringify(this.form))
            form.things = this.form.things
            form.content = this.form.content

            if (this.activeName == 'first') {
                this.form.type = 0
                form.img = this.form.img
                form.img_pc = this.form.img_pc
            } else if (this.activeName == 'second') {
                this.form.type = 1
            } else if (this.activeName == 'third') {
                form.img = this.form.imgJG
                form.img_pc = this.form.img_pcJG
                this.form.type = 2
            } else if (this.activeName == 'fourth') {
                this.form.type = 3
            } else if (this.activeName == 'fifth') {
                this.form.type = 4
            } else {
                this.form.type = 5
            }
            form.type = this.form.type
            let imgs = []
            for (let i in this.form.imgs) {
                imgs.push(this.form.imgs[i].url)
            }
            form.imgs = imgs
            for (let i in form.info) {
                form.info[i].tag = this.preText(form.info[i].tag);
            }
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let res = await this.$Http.setScientific(form)
                    if (res.status == 1) {
                        this.$message.success('保存成功')
                        let list = { first: 0, fifth: 4, sixth: 5 }
                        if (this.activeName == 'first' || this.activeName == 'fifth' || this.activeName == 'sixth') {
                            this.list[list[this.activeName]].content = form.content
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        //上传头像文件等
        okUpload(file) {
            let formData = new window.FormData();
            formData.append("files", file.file);
            this.$Http.upload(formData).then((res) => {
                if (res.status == 1) {
                    this.$message({
                        message: "上传成功",
                        type: "success",
                    });
                    switch (this.activeName) {
                        case 'first':
                            if (file.data) {
                                this.form.img_pc = res.data
                            } else {
                                this.form.img = res.data
                            }
                            break;
                        case 'second':
                            for (let i in this.form.info) {
                                if (file.data.flag == i) {
                                    this.form.info[i].img = res.data
                                }
                            }
                            this.$forceUpdate()
                            break;
                        case 'third':
                            if (file.data) {
                                this.form.img_pcJG = res.data
                            } else {
                                this.form.imgJG = res.data
                            }
                            break;
                        case 'fourth':
                            for (let i in this.form.things) {
                                if (file.data.flag == i) {
                                    this.form.things[i].img = res.data
                                }
                            }
                            this.$forceUpdate()
                            break;
                        case 'sixth':
                            this.form.imgs.push({ url: res.data })
                            break;
                    }

                } else {
                    this.$message(res.msg);
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    ::v-deep .w-e-toolbar {
        z-index: 1000 !important;
    }
    ::v-deep .w-e-text-container {
        z-index: 1 !important;
    }
    textarea {
        display: none;
    }
    .head-tabs {
        height: 40px;
        width: 100%;
        padding-left: 30px;

        ::v-deep {
            .el-tabs__nav-wrap::after {
                background-color: transparent;
            }
            .el-tabs__active-bar {
                background-color: rgb(64, 158, 255);
            }
            .el-tabs__item {
                height: 40px;
                line-height: 30px;
                font-size: 16px;
                font-weight: 400;
                text-align: left;
                letter-spacing: 1px;
                color: #364164;
            }
            .is-active {
                font-weight: 600 !important;
                color: rgb(64, 158, 255);
            }
        }
    }
    ::v-deep .el-form-item__label {
        float: initial;
    }
    .img {
        width: 146px;
        height: 146px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 3s;
        &:hover {
            i {
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba($color: #000000, $alpha: 0.3);
                color: rgba($color: #fff, $alpha: 1);
            }
        }
        i {
            position: absolute;
            color: #fff;
            font-size: 26px;
            display: none;
        }
    }
    ::v-deep .el-input.is-disabled .el-input__inner {
        color: #606266;
        background-color: transparent;
    }
    section {
        background: #f7fafc;
        padding: 30px;
        .content {
            width: 100%;
            height: 100%;
            background: #fff;
            border-top-left-radius: 16px;
            border-top-right-radius: 16px;
            padding: 20px;
            .list {
                display: flex;
                flex-wrap: wrap;
            }
            .tags {
                display: flex;
                align-items: center;
                margin-top: 20px;
                i {
                    font-size: 25px;
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
            .form {
                display: flex;
                flex-wrap: wrap;
            }
        }
    }
}
</style>